import { audioContext, playerStore } from '../../../store/index'
const playmodeNames = ['order','repeat','random']
Page({
    data: {

        id:0,
        currentSong: {},
        lyricInfo:[],
        durationTime:0,
        
        currentTime:0, // 歌曲当前播放时间
        currentLyric:'',// 当前歌词
        currentIndex:0,
        
        currentPage:0,
        contentHeight:0,
        sliderValue:0,
        isSliderChangeing:true,
        lyricScrollTop:0,

        playModeIndex:0, //歌曲播放模式
        playModeName:'order',

        isPlaying:false, //歌曲是否正在播放
        
        playListSongs:[], //歌曲列表
        show: false, // 歌曲列表展示
    },
    onLoad: function (options) {
        const id = options.id
        this.setData({ id })
        
        // 获取store里面的歌曲数据
        this.setupPlayStoreListenner()

        // 动态计算内容区高度
        const { screenHeight, statusBarHeight } = wx.getSystemInfoSync()
        // nav高度为44px
        const contentHeight = screenHeight - statusBarHeight - 44
        this.setData({contentHeight})
        playerStore.onState('playListSongs',(playListSongs)=>{
            this.setData({playListSongs})
        })
    },
    // 事件监听
    handleSwiperChange(event){
        const { current } = event.detail
        this.setData({currentPage:current})
    },
    // 返回
    handleBackClick(){
        wx.navigateBack()
    },
    // 进度条控制
    handleSliderChange(event){
        const value = event.detail.value
        // 歌曲总时长 * value / 100
        const currentTime = this.data.durationTime * value /100
        // audioContext.pause()
        audioContext.seek(currentTime / 1000)
        this.setData({sliderValue:value,isSliderChangeing:true,currentTime})
        this.setData({isPlaying:true})
        // playerStore.dispatch('changeMusicPlayStatusAction',true)
    },
    handleSliderChanging(event){
        const value = event.detail.value
        this.setData({isSliderChangeing:false })
        const currentTime = this.data.durationTime * value / 100
        this.setData({currentTime})
        this.setData({isPlaying:true})
        // playerStore.dispatch('changeMusicPlayStatusAction',true)
    },
    // 播放模式
    handleModeBtnClick(){
        let playModeIndex = this.data.playModeIndex + 1
        if(playModeIndex === 3) playModeIndex = 0
        playerStore.setState('playModeIndex',playModeIndex)
    },
    // 播放状态
    handelIsplayBtnClick(){
        const isPlay = this.data.isPlaying
        this.setData({isPlaying:!isPlay})
        playerStore.dispatch('changeMusicPlayStatusAction',!isPlay)
    },
    // 上一首
    handelPreBtnClick(){
        playerStore.dispatch('changeNewMusicAction',false)
    },
    // 下一首
    handelNextBtnClick(){
        playerStore.dispatch('changeNewMusicAction',true)
    },

    // 
    setupPlayStoreListenner(){
        // 监听歌曲详情信息
        playerStore.onStates(['currentSong','lyricInfo','durationTime'],({currentSong,lyricInfo,durationTime})=>{
            if(currentSong) this.setData({currentSong})
            if(lyricInfo) this.setData({lyricInfo})
            if(durationTime) this.setData({durationTime})
        })
        // 监听歌曲播放信息
        playerStore.onStates(['currentTime','currentLyric','currentIndex'],({currentTime,currentLyric,currentIndex})=>{
            if(currentTime && this.data.isSliderChangeing){ 
                // 事件变化
                const sliderValue = currentTime/this.data.durationTime *100
                this.setData({ currentTime, sliderValue }) 
            }
            if(currentLyric){ 
                this.setData({currentLyric})
            }
            // 歌词变化
            if(currentIndex){ 
                this.setData({currentIndex,lyricScrollTop:currentIndex *35 })
            }
        })
        // 监听歌曲播放模式
        playerStore.onStates(['playModeIndex','isPlaying'],({playModeIndex,isPlaying})=>{
            if(playModeIndex !==undefined){
                this.setData({playModeIndex,playModeName:playmodeNames[playModeIndex]})
            } 
            if(isPlaying !==undefined){
                this.setData({ isPlaying })
            } 
        })
    },
    // 展示歌曲列表
    onClose() {
        this.setData({ show: false });
      },
    onShowListSongs() {
        this.setData({ show: true });
      }
})